<template>
<div>
  <el-table
    :data="menuList"
    style="width: 100%" border
    row-key="id"
    :expand-row-keys="expandKeys"
  >
    <el-table-column prop="name" label="名称" ></el-table-column>
    <el-table-column prop="code" label="权限值"></el-table-column>
    <el-table-column prop="toCode" label="跳转权限值"></el-table-column>
    <el-table-column label="操作" width="240">
      <template slot-scope="{row,$index}">
        <hint-button :disabled="row.level===4" @click="addMenuOrFun(row)" :title="addTitleName" type="primary" icon="el-icon-plus" size="mini"></hint-button>
        <hint-button type="primary" @click="updateMenuOrFun(row)" :title="updateTitleName" icon="el-icon-edit" size="mini"></hint-button>
        <el-popconfirm title="建议删除" @onConfirm="deleteMenuOrFun(row)">
          <hint-button type="danger" slot="reference" title="删除" icon="el-icon-delete" size="mini"></hint-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    :title="dialogName"
    :visible.sync="dialogVisible"
    @close="resetData"
    width="30%"
  >
    <el-form ref="form" :model="menuInfo" label-width="140px" :rules="rules">
      <el-form-item label="父级名称" v-if="!menuInfo.id">
        <el-input v-model="menuInfo.pname" disabled ></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="menuInfo.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="功能权限值" prop="code">
        <el-input v-model="menuInfo.code" placeholder="功能权限值"></el-input>
      </el-form-item>
      <el-form-item label="跳转路由权限值">
        <el-input v-model="menuInfo.toCode" placeholder="跳转路由权限值"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align:center">
      <el-button @click="resetData">取 消</el-button>
      <el-button type="primary" @click="addOrUpdatePermission">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return{
      menuList:[],
      expandKeys:[],
      menuInfo:{
        "code": "",//
        "level": 0,
        "name": "",//
        "pid": "",
        "toCode": "",//
        "type": 0
      },
      rules:{
        name:[{required: true, trigger: 'blur', message: '名称必须输入'}],
        code:[{required: true, trigger: 'blur', message: '权限值必须输入'}]
      },
      dialogVisible:false,
    }
  },
  mounted(){
    this.getMenuList()
  },
  computed:{
    dialogName(){
      return this.menuInfo.id?this.updateTitleName:this.addTitleName
    },
    addTitleName(){
      return this.menuInfo.level<4?'添加菜单':'添加功能'
    },
    updateTitleName(){
      return this.menuInfo.level<4?'修改菜单':'修改功能'
    },
  },
  methods:{
    getMenuList(){
      this.$API.menu.reqMenuList().then(res=>{
        this.menuList = res.data.children
        this.expandKeys = [this.menuList[0].id]
      })
    },
    //添加功能或菜单
    addMenuOrFun(row){
      this.menuInfo.pid = row.id
      this.menuInfo.level = row.level + 1
      this.menuInfo.type = this.menuInfo.level < 4 ? 1:2//1路由 2按钮
      this.menuInfo.pname = row.name
      this.dialogVisible = true
      // 清除校验(必须在界面更新之后) 不然下次打开还会有上次的校验结果
      this.$nextTick(() => this.$refs.form.clearValidate())
    },
    //修改功能或菜单
    updateMenuOrFun(row){
      this.menuInfo = {...row}
      this.dialogVisible = true
      // 清除校验(必须在界面更新之后)
      this.$nextTick(() => this.$refs.form.clearValidate())
    },
    //提交添加 功能/菜单
    addOrUpdatePermission(){
      this.$refs.form.validate(valid=>{
        if (valid){
          const {pname,...menuList} = this.menuInfo
          this.$API.menu[menuList.id?'reqUpdateMenu':'reqAddMenu'](this.menuInfo).then(res=>{
            if(res.code===20000){
              this.$message.success(`${ menuList.id ? '修改' : '添加' }成功`)
            }else{
              this.$message.error(res.message||res.data)
            }
            this.dialogVisible = false
            this.getMenuList()
          })
        }
      })
    },
    //删除
    deleteMenuOrFun(row){
      this.$API.menu.reqDeleteMenu(row.id).then(res=>{
        this.$message.success(res.code===20000?'删除成功':res.message)
        this.getMenuList()
      })
    },
    //取消按钮 重置数据
    resetData(){
      this.dialogVisible = false
      this.menuInfo = {
        "code": "",//
        "level": 0,
        "name": "",//
        "pid": "",
        "toCode": "",//
        "type": 0
      }
    }
  }
}
</script>

<style scoped>

</style>
